<template>
  <!-- 选择方案 -->
  <el-dialog
    title="选择需要批量应用的方案"
    :visible.sync="$attrs.visableIf"
    @close="handleCloseDialog"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    width="852px"
  >
    <div class="content-big">
      <div class="content-left">
        <el-form
          :model="queryParams"
          ref="queryForm"
          size="small"
          :inline="true"
          class="head-title bg_f7f7f7 flexbetween"
        >
          <el-form-item label="" prop="keyword" class="mb-0">
            <el-checkbox v-model="checkedAll" @click="getCheckedAll"
              >全选</el-checkbox
            >
          </el-form-item>
          <el-form-item label="" prop="keyword" class="mb-0">
            <el-input
              placeholder="搜方案名称"
              v-model="queryParams.keyword"
              @keyup.enter.native="handleQuery"
              class="x-input-select"
              style="width: 250px"
            >
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </el-form-item>
        </el-form>
        <div class="select-list p-20">
          <el-checkbox-group v-model="form.type_id">
            <el-checkbox
              v-for="(item, index) in advertTypeList"
              :key="index"
              :label="Number(item.value)"
              class="mb-10 flex aligncenter"
            >
              <div class="title line_h_22 pl-8 c_text">{{ item.label }}</div>
              <div class="code line_h_22 f-12 pl-8 c_text">ID：{{ item.value }}</div>
            </el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
      <div class="content-right p-16">
        <div class="fw-6 mb-12">应用记录</div>
        <ul>
          <li class="bg_f7f7f7 mb-10 p-10 br-4" v-for="item in 16" :key="item">
            <div class="name flexbetween mb-16">
              <el-popover placement="top" trigger="hover" class="p_title">
                <div style="width:320px">
                    <div class="mb-6">方案：</div>
                    <div class="plantitle p-8 br_4">民雨薇</div>
                </div>
                <div slot="reference" class="w_full">民雨薇</div>
              </el-popover>
              <span class="c_primary commhover">选择</span>
            </div>
            <div class="type flexbetween f-12">
              <i class="round green"></i>已完成
              <span class="c_text3">2024-01-12 14:28:03</span>
            </div>
          </li>
          <!-- <li>
            <div class="name">民雨薇 <span>选择</span></div>
            <div class="type">
              <i class="round glay"></i>未完成 <span>2024-01-12 14:28:03</span>
            </div>
          </li> -->
        </ul>
      </div>
    </div>

    <div class="footer-btn" slot="footer">
      <el-button @click="handleCloseDialog">取消</el-button>
      <el-button type="primary" @click="gotoNext">下一步选择企微号</el-button>
    </div>
    <SelectWechat
      v-if="showApplicationPage"
      :visableIf.sync="showApplicationPage"
    ></SelectWechat>
  </el-dialog>
</template>

<script>
import { listUser } from "@/api/system/user";

export default {
  name: "batchApplication",
  components: {
    SelectWechat: () => import("./SelectWechat.vue"),
  },
  data() {
    return {
      // 查询参数
      queryParams: {},
      input3: null, //群查找
      radio: null, //
      keyWord: null, //关键词
      form: {
        type_id: [],
      },
      showApplicationPage: false,
      checkedAll: false, //是否全选
      tableDataList: [],
      total: 8, // 表格的总条数
      advertTypeList: [
        {
          value: 1,
          label: "企划方案",
        },
        {
          value: 2,
          label: "放假时间方案",
        },
        {
          value: 3,
          label: "放假时间方案",
        },
      ],
      showSelectSmartTags: false, //智能标签
      tableHeight: 600,
      dateRange1: [],
    };
  },
  created() {
    this.tableDataList = [];
    for (let i = 0; i < 10; i++) {
      let obj = {
        name: "小红",
        status: "离线",
      };
      this.tableDataList.push(obj);
    }
  },
  mounted() {},
  watch: {},
  methods: {
    getCheckedAll() {
      //是否全选
    },

    /** 查询用户列表 */
    getList() {
      this.loading = true;
      listUser(this.addDateRange(this.queryParams, this.dateRange)).then(
        (response) => {
          this.userList = response.rows;
          this.total = response.total;
          this.loading = false;
        }
      );
    },
    gotoNext() {
      this.showApplicationPage = true;
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.queryParams.deptId = undefined;
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(val) {
      this.multipleSelection = [];
      if (val && val.length > 0) {
        val.forEach((item) => {
          this.multipleSelection.push(item.id);
        });
        console.log("multipleSelection", this.multipleSelection);
      }
    },
    handleCloseDialog() {
      this.$emit("update:visableIf", false);
      this.$emit("handleQuery");
    },
  },
};
</script>

<style scoped lang="scss">
.el-checkbox-group {
  display: flex;
  flex-wrap: wrap;

  .el-checkbox {
    padding: 8px 12px;
    border: 1px solid #e9e9e9;
    display: flex;
    width: calc(50% - 10px) !important;
    margin: 0px 5px;
    box-sizing: border-box;

    .title {
      white-space: normal;
    }

    ::v-deep .el-checkbox__inner {
      margin-top: 4px;
    }
  }
}

.content-big {
  display: flex;
  height: 100%;

  .content-left {
    width: calc(100% - 312px);
    border-right: 1px solid #f0f0f0;
  }

  .select-list {
    height: 606px;
    overflow-y: auto;
  }

  .content-right {
    flex: 1;
    height: 660px;
    overflow-y: auto;
    ul {
      li {
        display: flex;
        justify-content: space-between;
        flex-direction: column;

        .p_title{
            width: 80%;
        }

        .type {
          position: relative;
          padding-left: 10px;
          i {
            font-size: 10px;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            position: absolute;
            left: 0px;
            top: 6px;
            &.green {
              background: #52c41a;
            }
            &.glay {
              background: #c1c2c5;
            }
          }
        }
      }
    }
  }
}

::v-deep .el-dialog__body {
  height: 660px;
  padding: 0px;
}

.head-title {
  padding: 10px 20px;
  border-bottom: 1px solid #e9e9e9;
}
.plantitle{
    background-color: #f0f0f0;
}
</style>
